<script setup lang="ts">
definePageMeta({
  layout: 'default',
  title: '活动',
  i18n: 'menu.activity',
})
const { t, setLocale } = useI18n();
const menuList = reactive([
  { title: "home_page.leftMenu.hots", icon: 'fire-o', urls: 'img/hot.png', url: 'img/un-hot.png' },
  { title: "home_page.leftMenu.favorite", icon: 'like-o', urls: 'img/love.png', url: 'img/un-love.png' },
  { title: "home_page.leftMenu.slots", icon: 'gift-o', urls: 'img/slots.png', url: 'img/un-slots.png', logo: '' },
  { title: "home_page.leftMenu.chess", icon: 'smile-o', urls: 'img/qp.png', url: 'img/un-qp.png', logo: '' },
  { title: "home_page.leftMenu.fish", icon: 'gem-o', urls: 'img/by.png', url: 'img/un-by.png', logo: '' },
  { title: "home_page.leftMenu.person", icon: 'contact-o', urls: 'img/zr.png', url: 'img/un-zr.png', logo: '' },
  { title: "home_page.leftMenu.sport", icon: 'flag-o', urls: 'img/sport.png', url: 'img/un-sport.png', logo: '' },
  { title: "home_page.leftMenu.lottery", icon: 'balance-o', urls: 'img/cp.png', url: 'img/un-cp.png', logo: '' },
]);
const specialIndex = ref(0)
const active = ref(0);
const menuContainer = ref<HTMLElement | null>(null)
const menuItemRefs = ref<(HTMLElement | null)[]>([]) // 存储每个菜单项的 DOM 引用

const getGame = (item: any, index: number) => {
  specialIndex.value = index
  active.value = index

  if (!menuContainer.value || !menuItemRefs.value[index]) return

  const container = menuContainer.value
  const targetItem = menuItemRefs.value[index]
  const containerWidth = container.clientWidth
  const itemPosition = targetItem.offsetLeft
  const itemWidth = targetItem.offsetWidth

  // 计算目标 scrollLeft 使当前菜单项居中
  let targetScrollLeft = itemPosition - (containerWidth / 2 - itemWidth / 2)

  // 边界限制：不能超过最左边
  if (index === 0) {
    targetScrollLeft = 0
  }
  // 边界限制：不能超过最右边
  else if (index === menuList.length - 1) {
    const totalWidth = Array.from(menuItemRefs.value).reduce((sum, el) => {
      return sum + (el?.offsetWidth ?? 0) + 15 // 加上 margin-right
    }, 0)
    targetScrollLeft = totalWidth - containerWidth
  }

  container.scrollTo({
    left: targetScrollLeft,
    behavior: 'smooth'
  })
}
</script>

<template>
  <div mx-auto pt-15 text-center text-16 text-dark dark:text-white>
    <div class="menu-container" ref="menuContainer">
      <div v-for="(item, index) in menuList" :key="index" ref="menuItemRefs"
        class="menu  h-50 flex flex-col items-center justify-center mb-3 cursor-pointer"
        :class="{ 'active-menu-item': active === index }" @click="getGame(item, index)">
        <img v-show="active === index" :src="item.url" alt="" class="w-20" />
        <img v-show="active !== index" :src="item.urls" alt="" class="w-20" />
        <span class="text-12">{{ t(item.title) }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="css">
.active-menu-item {
  background: url('/img/menu-bg.png') no-repeat center center;
  background-size: 100% 100%;
  font-weight: bold;
  color: #ffffff;
}

.menu-container {
  display: flex;
  overflow-x: auto;
  /* 启用横向滚动 */
  white-space: nowrap;
  /* 防止换行 */
  -webkit-overflow-scrolling: touch;
  /* 在 iOS 上更流畅 */
  scrollbar-width: none;
  /* 可选：隐藏滚动条 */
}

.menu-container::-webkit-scrollbar {
  display: none;
  /* 可选：隐藏滚动条 */
}

.menu {
  flex: 0 0 auto;
  width: calc(20% - 10px);
  /* 每行显示 5 个 (100% / 5 = 20%)，减去 margin 影响 */
  /* 设置间距 */
}
</style>
